{extend name="layout/layout"}
{block name="content"}
<style>
    .ticket_content .ticket_item {
        background: #ffb800;
        color: #fff;
        padding: 10px 5px;
        margin-bottom: 10px;
        width: 25%;
        text-align: center;
        margin-right: 15px;
        border-radius: 5px;
        cursor: pointer;
    }
    .ticket_content .active{
        background: #F97A28;
        color: #fff;
        padding: 10px 5px;
        margin-bottom: 10px;
        width: 25%;
        text-align: center;
        margin-right: 15px;
        border-radius: 5px;
        cursor: pointer;
    }
    .ticket_item:hover{
        background: #F97A28;
    }
    .disabled{
        background-color: #ccc!important;
        color: #EAEAEA!important;
    }
</style>
<main class="user_page">
    <section>
        <div class="layui-main">
            <div class="img_box w100">
                <img src="{$activity.logo}" style="max-height:300px;">
            </div>
          
            <div class="block_com">
                <dl class="d-flex flex-wrap uavv_ul1">
                    <dd class="blue_1">{$activity.type_name}</dd>
                    {foreach $theme as $themeItem}
                    <dd class="pink_1">{$themeItem.theme_name}</dd>
                    {/foreach}
                </dl>
                <div class="mt28 ft-bold mb30">{$activity.name}</div>
                <ul class="layui-row layui-col-space30 ul_height uavv_ul2">
                    <li class="layui-col-md8 layui-col-xs12">
                        <div class="item ft14 ">
                            <div class="ft-bold mb30">
                                <p>时间：{$activity.begin_time} - {$activity.end_time}</p>
                                <br>
                                <p>主办：{$activity.organizer_name} </p>
                                <br>
                                <p>地点：{$activity.region_name} - {$activity.address_detail}</p>
                                <br>
                                {if $activity.show_tickets == 1} 
                                    <p>已报名人数：{$activity.order_count|default=0}</p>    
                                {/if} 
                            </div>
                            <div class="b1 ft14 gary_c9">
                                <p class="tac" style="white-space: pre-line;text-align:left">{$activity.desc|raw}</p>
                            </div>
                            <div class="mt20 gary_c9  ft12 ">
                                <p class="tac" style="white-space: pre-line;text-align:left;line-height: 2.0;">注意：{$activity.notice|raw}</p>
                            </div>
                        </div>
                    </li>
                    <li class="layui-col-md4 layui-col-xs12">
                        <div class="item ft14 ">
                            <p class=" ft15 ft-bold">门票信息</p>
                            <div class="ticket_content" style="padding:20px 0 ;display: flex;flex-wrap: wrap;">
                                {volist name="ticket_detail" id="vo"} 
                                    <button class="ticket_item {if $vo.rest_quantity <=0} disabled {/if}" {if $vo.rest_quantity <=0} disabled=true {/if} onclick="select_ticket(1,{$vo.id})" style="margin-bottom: 10px;">{$vo.name}</button> 
                                {/volist}
                                {volist name="ticket_group" id="vo"} 
                                    <button class="ticket_item" onclick="select_ticket(2,{$vo.id})" >{$vo.group_name}</button> 
                                {/volist}
                            </div>
                           
                            <input type="hidden" class="ticket_type">
                            <input type="hidden" class="ticket_id">
                            <p class="mt20 ft13 gary_c6">發售時間：<span class="ticket_sale_begin"></span> - <span class="ticket_sale_end"></span></p>
                            <div class="lmt36 w100  mt30 gary_c6">門票說明：<pre class="ft12 mt5 ticket_desc"></pre></div>
                            <div class="lmt36 w100  mt30 gary_c6">門票價格：<span class="ticket_price"  style="color:#ff5722"></span></div>
                            <div class="lmt36 w100  mt30 gary_c6">門票狀態：<span class="ticket_status"></span></div>
                            {if $activity.show_tickets == 1} 
                                <div class="lmt36 w100  mt30 gary_c6">門票剩餘：<span class="ticket_stock"></span></div>
                               
                            {/if}
                            
                            <p class=" ft15 ft-bold" style="margin-top:10px;">報名表：</p>
                            <form class="layui-form buy_form" action="" onsubmit="return false;" style="padding-top: 10px;display: none;">
                                <div class="layui-form-item">
                                    <div class="layui-form-item">
                                        <div style="display:flex;justify-content: space-between;margin-bottom: 0.1rem;">
                                            <div  class="diy_lab">姓名</div>
                                          </div>
                                        <div class="input_div">
                                          <input type="text" name="name" required  lay-verify="required" placeholder="請輸入報名姓名" autocomplete="off" class="layui-input">
                                        </div>
                                      </div>
                                      <div class="layui-form-item">
                                        <div style="display:flex;justify-content: space-between;margin-bottom: 0.1rem;">
                                            <div  class="diy_lab">郵箱</div>
                                          </div>
                                        <div class="input_div">
                                          <input type="text" name="email" required  lay-verify="required" placeholder="請輸入報名郵箱" autocomplete="off" class="layui-input">
                                        </div>
                                      </div>
                                      <div class="layui-form-item">
                                        <div style="display:flex;justify-content: space-between;margin-bottom: 0.1rem;">
                                            <div  class="diy_lab">聯繫方式</div>
                                          </div>
                                        <div class="input_div">
                                          <input type="text" name="phone" required  lay-verify="required" placeholder="請輸入報名電話" autocomplete="off" class="layui-input">
                                        </div>
                                      </div>
                                        {if isset($diyform) && count($diyform)}
                                            {volist name="diyform" id="vo"} 
                                                <div class="layui-form-item">
                                                    <div style="display:flex;justify-content: space-between;margin-bottom: 0.1rem;">
                                                        <div data-type="{$vo.label_type}" class="diy_lab">{$vo.label}</div>
                                                    
                                                    </div>
                                                    {if $vo.desc !=''}
                                                        <p class="tip1">{$vo.desc}</p>
                                                    {/if}
                                                    <div class="input_div" data-lable="{$vo.label}" data-options="{$vo.options|default=''}" data-must="{$vo.must}" data-type="{$vo.label_type}" data-tips="{$vo.tips|default=''}" data-desc="{$vo.desc|default=''}">
                                                        {if $vo.label_type == 'radio' && isset($vo.options_arr) && is_array($vo.options_arr) &&  count($vo.options_arr)} 
                                                            {volist name="$vo.options_arr" id="radio_option"} 
                                                                <input type="radio" name="{$vo.label}" value="{$radio_option}" title="{$radio_option}">
                                                            {/volist} 
                                                        {elseif ($vo.label_type == 'checkbox' && isset($vo.options_arr) && is_array($vo.options_arr) &&  count($vo.options_arr)) /} 
                                                            {volist name="$vo.options_arr" id="checkbox_option"} 
                                                                <input type="checkbox" name="{$vo.label}" value="{$checkbox_option}" title="{$checkbox_option}">
                                                            {/volist} 
                                                        {elseif ($vo.label_type == 'selects' && isset($vo.options_arr) && is_array($vo.options_arr) &&  count($vo.options_arr)) /} 
                                                            
                                                            <select  name="{$vo.label}" lay-verify="required">
                                                                <option value=""></option>
                                                                {volist name="$vo.options_arr" id="select_option"} 
                                                                    <option value="{$select_option}">{$select_option}</option>
                                                                    <option value="{$select_option}">{$select_option}</option>
                                                                    <option value="{$select_option}">{$select_option}</option>
                                                                {/volist} 
                                                            </select>
                                                        {elseif ($vo.label_type == 'textarea') /}
                                                            <textarea name="{$vo.label}" placeholder="{$vo.tips}" class="layui-textarea"></textarea>
                                                        {else /} 
                                                            <input type="{$vo.label_type}" name="{$vo.label}" lay-verify="required" autocomplete="off" placeholder="{$vo.tips}" class="layui-input">
                                                        {/if}
                                                    </div>
                                                </div> 
                                            {/volist}
                                        {/if}
                                <!-- <div class="layui-form-item">
                                  <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                  </div>
                                </div> -->
                            
                         
                            <div class="lmt36 w100  layui-bg-orange layui-btn mt30 free_buy"  lay-submit lay-filter="buy_ticket">購買</div>
                            <div class="paypal_buy" style="display: none;">
                                <div id="buy-btn"></div>
                                <script src="https://www.paypal.com/sdk/js?client-id=AevZKw0S4qVGKSc6Lt5HKtoTiTqk0_H1Rbd7uMSmlW_Cz7X7ncjM5UesnW56aZ45etyU5yNqDIu-pnkx&components=buttons"></script>
                                <script>
                                    $(function(){
                                        paypal.Buttons({
                                            createOrder: function(data, actions) {
                                                return actions.order.create({
                                                    purchase_units: [{
                                                        amount: {
                                                            value: '0.01'
                                                        }
                                                    }]
                                                });
                                            },
                                            onApprove: function(data, actions) {
                                                return actions.order.capture().then(function(details) {
                                                    alert('Transaction completed by ' + details.payer.name.given_name);
                                                });
                                            },
                                        }).render('#buy-btn');
                                    })
                                </script>
                            </div>
                            
                        </form>
                        </div>
                    </li>
                </ul>
                <div class="mt30 ft30 ft-bold mb30">活動嘉賓</div>
                
                <div class="layui-row layui-col-space30" style="margin-bottom: 150px;">
                    {foreach $guest as $guestItem}
                    <div class="item layui-col-md3 layui-col-xs6 ml20 " style="border: 1px solid #EAEAEA;border-radius: 4px;padding: 0.3rem 0.3rem;height:320px;width: 320px;">
                        <p style="text-align: center;"><img src="{$guestItem.profile}" alt="" style="width:150px;height: 150px;object-fit: cover;border-radius: 50%;"></p>
                        <p class="mt20 ft-bold">{$guestItem.username}</p>
                        <p class="mt10 ft13">{$guestItem.company_name} - {$guestItem.posit}</p>
                        <p class="mt10 ft14">{$guestItem.user_desc|raw}</p>
                    </div>
                    {/foreach}
                </div>

                <div class="mt30 ft30 ft-bold mb30">活動地圖</div>
                <div class="layui-row layui-col-space30" id="allmap" style="height: 650px;">

                </div>
            </div>
        </div>
    </section>

</main>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=zdo5qzD3aCxUKPqguM7Fzp6kN8LXShDG"></script>
<script>
    layui.use('form', function(){
    var form = layui.form;
    
    //提交
    form.on('submit(buy_ticket)', function(data){
 
        layui.layer.confirm('确认购买门票吗？', function (index) {
            layui.layer.close(index);
            $.quickPost('/activity/buy_ticket',{
                'activity_id'   : "{$activity.id}",
                'ticket_id'     : $('.ticket_id').val(),
                'ticket_type'   : $('.ticket_type').val(),
                'ticket_form'   : data.field
            }).done(res=>{
                layui.layer.msg('购买成功！',{icon:1})
            })
        })
        return false;
    });
    });
    $('.ticket_item').click(function(res){
        $(this).addClass('active').stop().siblings('.ticket_item').removeClass('active');
    })
    function select_ticket(type,data){
        layui.layer.closeAll();
        $('.buy_form').hide();
        $('.ticket_sale_begin').text('')
        $('.ticket_sale_end').text('')
        $('.ticket_desc').text('')
        $('.ticket_price').text('')
        $('.ticket_status').text('')
        $('.ticket_stock').text('')
        $.post(`/activity/check_ticket/${data}`,{type:type}).done(res=>{
            var stock = 0;
            if(type == 1){
            //普通票
                if(res.data.price > 0){
                    return layui.layer.msg('抱歉，收费票暂未开放')
                }
                $('.ticket_sale_begin').text(res.data.ticketModel.sale_begin)
                $('.ticket_sale_end').text(res.data.ticketModel.sale_end)
                $('.ticket_desc').text(res.data.ticketModel.desc)
                $('.ticket_price').text(res.data.price > 0 ? res.data.price : '免费')
                $('.ticket_type').val(1);
                $('.ticket_id').val(res.data.id);
                $('.ticket_stock').text(res.data.rest_quantity)
                if(res.data.sale_status == 1 && res.data.rest_quantity > 0){
                    $('.buy_form').show();
                }
            }
            if(type == 2){
                //分组票
                if(res.data.group_price > 0){
                    return layui.layer.msg('抱歉，收费票暂未开放')
                }
                $('.ticket_sale_begin').text(res.data.group_sale_begin)
                $('.ticket_sale_end').text(res.data.group_sale_end)
                $('.ticket_desc').text(res.data.group_desc ?? '')
                $('.ticket_price').text(res.data.group_price > 0 ? res.data.group_price : '免费')
                $('.ticket_type').val(2);
                $('.ticket_id').val(res.data.id);
                $('.ticket_stock').text(res.data.group_remain_number)
                if(res.data.sale_status == 1 && res.data.group_remain_number > 0){
                    $('.buy_form').show();
                }
            }
                 
                if(res.data.sale_status == 2){
                    $('.ticket_status').text('已结束')
                }else if(data.sale_status == 3){
                    $('.ticket_status').text('已售完')
                }else if(data.sale_status == 4){
                    $('.ticket_status').text('未开售')
                }else{
                    $('.ticket_status').text('售卖中')
                }
        })
       
   
      
    }
    var map = new BMap.Map("allmap");          // 创建地图实例  
    var point = new BMap.Point(113.140474,27.863719);  // 创建点坐标  
    map.centerAndZoom(point, 15); 
    map.enableScrollWheelZoom(true);  
    function buyTicket() {
        layui.layer.confirm('确认购买门票吗？', function (index) {
            layui.layer.close(index);
            location.reload('/activity/user/ticket')
            $.quickPost('/activity/buy_ticket/{$ticket.id}.html').done(res=>{
                layui.layer.msg('购买成功！',{icon:1},function(){
                    location.reload('/activity/user/ticket')
                })
            })
        })
    }
</script>
{/block}